/**
 * This file is part of MolView (http://molview.org)
 * Copyright (c) 2014, 2015 Herman Bergwerf
 *
 * MolView is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * MolView is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with MolView.  If not, see <http://www.gnu.org/licenses/>.
 */

@import (reference) "global";

.share
{
	cursor: pointer;
	display: inline-block;
	position: relative;
	margin: 5px;
	overflow: hidden;

	.no-select;
}

.share:hover > span:after
{
	opacity: 1;
}

.share > span
{
	display: inline-block;
	position: relative;
	padding: 10px;
	min-width: 100px;

	color: #fff;
	font-size: 16pt;
	text-align: center;
	background: rgba(0, 0, 0, 0.2);

	border-radius: 0 4px 4px 0;
}

.share-twitter, .share-twitter > span:after
{ background: #55acee; }
.share-facebook, .share-facebook > span:after
{ background: #3b5999; }
.share-googleplus, .share-googleplus > span:after
{ background: #d34836; }

.share:before
{
	display: inline-block;
	left: 0;
	width: 48px;
	vertical-align: sub;

	font-family: FontAwesome;
	font-size: 22pt;
	text-align: center;
	color: #fff;
}

.share > span:after
{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;

	color: #fff;
	font-size: 20pt;
	text-align: center;
	line-height: 48px;
	opacity: 0;

	border-radius: 0 4px 4px 0;
}

.share-facebook:before
{ content: '\f09a'; }
.share-twitter:before
{ content: '\f099'; }
.share-googleplus:before
{ content: '\f0d5'; }

.share-facebook span:after
{ content: 'Share'; }
.share-twitter span:after
{ content: 'Tweet'; }
.share-googleplus span:after
{ content: '+1'; }
